<template>
	<view class="container">
		<view class="business-card-main">
			<view class="business-card__wrapper">
				<image :src="userInfo.avatar" class="business-card__avatar" mode="aspectFill"></image>
				<image src="/static/images/business-card/card-bg.png" class="business-card__bg"></image>
				<view class="business-card__name">{{userInfo.name}}</view>
				<view class="business-card__title">{{userInfo.title}}</view>
				<view class="business-card__phone">{{userInfo.phone}}<text
						class="iconfont icon-24gf-telephone business-card__icon"></text></view>
				<view class="business-card__company">{{userInfo.company}}<text
						class="iconfont icon-gongsi business-card__icon"></text></view>
			</view>
			<view class="card-btn__wrapper">
				<view class="card-btn card-btn--sync" @tap="addPhoneContact">同步到通讯录</view>
				<view class="card-btn card-btn--share" @tap="showShare = true">分享名片</view>
			</view>
			<view scroll-x class="contact__scroll">
				<view class="contact-item__wrapper">
					<view class="contact-item" @tap="makePhoneCall">
						<text class="iconfont icon-show_dianhua"></text>
						<view class="contact-item__right">
							<text class="contact-item__name">拨打电话</text>
							<text class="contact-item__value">{{userInfo.phone}}</text>
						</view>
					</view>
				</view>
				<view class="contact-item__wrapper">
					<view class="contact-item" @tap="showWechat">
						<text class="iconfont icon-weixin1"></text>
						<view class="contact-item__right">
							<text class="contact-item__name">加微信</text>
							<text class="contact-item__value">{{userInfo.wechat}}</text>
						</view>
					</view>
				</view>
				<view class="contact-item__wrapper">
					<view class="contact-item" @tap="toWebview">
						<text class="iconfont icon-code"></text>
						<view class="contact-item__right">
							<text class="contact-item__name">个人开源</text>
							<text class="contact-item__value">gitee地址</text>
						</view>
					</view>
				</view>
				<view class="contact-item__wrapper" style="margin-right: 20rpx;">
					<view class="contact-item" @tap="onGuide">
						<text class="iconfont icon-daohang1"></text>
						<view class="contact-item__right">
							<text class="contact-item__name">导航</text>
							<text class="contact-item__value">点击导航</text>
						</view>
					</view>
				</view>
			</view>
			<view class="praise__wrapper">
				<view class="priase-left__wrapper">
					<image src="https://api.horosama.com/random.php?t=1" class="praise__img" mode="aspectFill"></image>
					<image src="https://api.horosama.com/random.php?t=2" class="praise__img" mode="aspectFill"></image>
					<image src="https://api.horosama.com/random.php?t=3" class="praise__img" mode="aspectFill"></image>

					<text class="praise__text">等人浏览了</text>
				</view>
				<view class="priase-right__wrapper" @tap="onPraise">
					<text class="praise__text">靠谱</text>
					<text class="praise__icon iconfont icon-dianzan_kuai"
						:class="{'praise__icon--active':isPraise}"></text>
				</view>
			</view>
		</view>
		
		<view class="introduce-title">
			<view class="introduce-title__icon"><text class="iconfont icon-peizhitubiaosvg-"></text></view>我的个人简介
		</view>
		
		<view class="introduce-content__wrapper">
			
			<block v-for="(item,index) in introduces">
				<view class="introduce-content__title" v-if="item.title">{{item.title}}</view>
				<view class="introduce-content__text">{{item.text}}</view>
			</block>
			
			<view class="introduce-content__title">主要经历</view>
			<view class="introduce-timeline">
				<view class="introduce-timeline-item" v-for="(item,index) in projects">
					<view class="introduce-timeline-item__tail" v-if="index<projects.length-1"></view>
					<view class="introduce-timeline-item__node"></view>
					<view class="introduce-timeline-item__wrapper">
						<view class="introduce-timeline-item__timestamp">{{item.year}}</view>
						<view class="introduce-timeline-item__content">
							<view class="introduce-card">
								<view class="introduce-card__title">{{item.title}}</view>
								<view class="introduce-card__text">{{item.brief}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<button class="contact-float" open-type="contact">
			<image class="contact-float__avatar" :src="userInfo.avatar"></image>
			<view class="contact-float__text">聊一聊</view>
		</button>

		<es-card-share :show="showShare" :userInfo="userInfo" @close="showShare=false"></es-card-share>

		<canvas canvas-id="shareId" id="shareId" class="share-canvas"></canvas>

		<canvas canvas-id="posterId" id="posterId" class="poster-canvas"></canvas>

	</view>

</template>

<script>
	import poster from '../../../libs/poster.js';
	let app = getApp();
	export default {
		data() {
			return {
				userInfo: {
					avatar: "/static/images/business-card/avatar.jpg", //头像
					name: "陈冠希", //姓名
					lastName: "冠希",
					firstName: "陈",
					title: "首席摄影师", //职称
					phone: "188****8888", //手机号
					company: "CLOT FAMILY", //公司
					wechat: "Edison Chen", //微信号
					address: "陈冠希目前居住在日本东京", //导航地址
					longitude: 139.46, //经度
					latitude: 35.42, //纬度
					gitee:"'https://gitee.com/leiyuxi'",
				},
				introduces:[
					{title:"",text:"陈冠希（Edison Chen），原名陈兴华，1980年10月7日出生于加拿大温哥华，拥有八分之一葡萄牙血统 [131]，加拿大籍华语男歌手、演员、商人。"},
					{title:"早年经历",text:"陈冠希父亲陈泽民是香港商人 [9]，早年财势雄厚，加上在商界和演艺圈都有很好的人缘，在很小的时候陈冠希就差不多见齐了香港有名的艺人"},
					{title:"从商经历",text:"2003年，创立CLOT COMPANY LIMITED（凝结集团）并出任行政总裁。2004年，开始推出品牌CLOT产品，并亲自参与服装的设计、用料等各个方面。 [50]2006年，在上海长乐路开设服装店。2007年，与DJ Tommy、MC仁一起成立了CLOT MEDIA DIVISION（CMD），陈冠希出任CEO。"},
					{title:"个人生活",text:"陈冠希绯闻女友众多，但是唯一得到陈冠希承认的女友只有杨永晴一人"},
				],
				projects:[
					{year:"2000年6月8日",title:"特警新人类2",brief:"在英皇娱乐发行EP《陈冠希》宣告在乐坛出道；获得香港电影金像奖最佳新演员奖提名 [2]，以及十大劲歌金曲颁奖典礼和十大中文金曲的最受欢迎男新人奖金奖，和香港唱片销量大奖全年最高新人奖。"},
					{year:"2001年5月",title:"发行专辑《Visual Diary》",brief:"8月，发行电影原声带《超人佳亚》；11月，发行专辑《Ed Is On》和电影原声带《特警新人类2-机动任务》；12月，发行专辑《Peace and Love》；同年，获得十大中文金曲最受欢迎最有前途男新人金奖和飞跃男歌手银奖。"},
					{year:"2002年",title:"无间道",brief:"，获刘伟强赏识，出演电影《无间道》中少年刘建明一角 [16] [129]，该片以5505万港币的票房成绩成为2002年香港电影年度票房冠军 [17]。"},
					{year:"2008",title:"艳照门",brief:"艳照门是2008年初，网友奇拿在天涯社区发布了一系列关于陈冠希和一些女艺人之间的自拍私密照和其他图片（俗称“艳照”），在网络反响极大并引发多方关注。"},
				],
				isPraise: false,
				showShare: false,
				index1: 0,
				index2: 1,
				index3: 2,
				shareImage: "",
			}
		},
		onLoad() {
			//点赞假数据
			this.isPraise = uni.getStorageSync(this.userInfo.name + ":isPraise") || false;
		},
		onShareTimeline() {
			return {
				title: '您好，这是我的名片，望惠存',
			}
		},
		async onShareAppMessage() {
			this.showShare = false;
			//生成海报
			
			let imageUrl = this.shareImage;
			if (!imageUrl) {
				imageUrl = await this.createShare();
			}
			return {
				imageUrl: imageUrl,
				title: '您好，这是我的名片，望惠存',
			}
		},
		methods: {
			async createShare() {
				let _this = this;
				return await new Promise((resolve, reject) => {
					poster.drawShare('shareId', _this.userInfo,
						res => {
							if (res) {
								_this.shareImage = res;
								resolve(res);
							} else {
								uni.showToast({
									icon: "none",
									title: "生成海报失败,请稍后再试"
								})
							}
						}
					)
				})
			},
			onPraise() {
				uni.setStorageSync(this.userInfo.name + ":isPraise", true);
				this.isPraise = true;
				uni.showToast({
					title: "感谢您的支持!",
					icon: "none"
				})
			},
			onGuide() {
				uni.openLocation({
					latitude: this.userInfo.latitude,
					longitude: this.userInfo.longitude,
					name: this.userInfo.company,
					address: this.userInfo.address,
					success: function() {
						console.log('success');
					}
				});
			},
			toWebview() {
				//小程序个人版暂不支持业务域名
				uni.setClipboardData({
					data:this.userInfo.gitee
				})
				uni.showToast({
					icon:"none",
					title:"链接已复制"
				})
				// uni.navigateTo({
				// 	url: "/pages/webview/webview?url=" + encodeURIComponent(url)
				// })
			},
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.userInfo.phone
				})
			},
			showWechat() {
				uni.previewImage({
					urls: ['/static/images/business-card/wechat.jpg'],
					current: "/static/images/business-card/wechat.jpg"
				})
			},
			addPhoneContact() {
				uni.addPhoneContact({
					nickName: this.userInfo.name,
					lastName: this.userInfo.lastName,
					firstName: this.userInfo.firstName,
					organization: this.userInfo.company,
					remark: '软件开发工程师',
					mobilePhoneNumber: this.userInfo.phone, //手机号
					weChatNumber: this.userInfo.wechat,
					success: function() {
						console.log('success');
					},
					fail: function() {
						console.log('fail');
					}
				});
			}
		}
	}
</script>

<style>
	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f7f7f7;
		padding-bottom: 200rpx;
	}

	.business-card-main {
		width: 750rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.business-card__wrapper {
		position: relative;
		width: 690rpx;
		height: 382rpx;
		border-radius: 8rpx;
		box-shadow: 0 6rpx 24rpx 0 rgb(7 1 38 / 10%);
		margin-top: 20rpx;
	}

	.business-card__avatar {
		width: 382rpx;
		height: 382rpx;
		border-radius: 8rpx 0 0 8rpx;
	}

	.business-card__bg {
		width: 690rpx;
		height: 382rpx;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 8rpx;
	}

	.business-card__name {
		position: absolute;
		right: 30rpx;
		top: 65rpx;
		color: #011128;
		font-size: 40rpx;
		font-weight: bold;
	}

	.business-card__title {
		position: absolute;
		right: 30rpx;
		top: 120rpx;
		color: #011128;
		font-size: 24rpx;
	}

	.business-card__phone {
		position: absolute;
		right: 30rpx;
		top: 280rpx;
		color: #67707e;
		font-size: 24rpx
	}

	.business-card__company {
		position: absolute;
		right: 30rpx;
		top: 320rpx;
		color: #67707e;
		font-size: 24rpx
	}

	.business-card__icon {
		color: #babcbf;
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.card-btn__wrapper {
		width: 690rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 0 20rpx 0;
	}

	.card-btn {
		width: 330rpx;
		height: 80rpx;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid rgb(66, 97, 140);
	}

	.card-btn--sync {
		background-color: #ffffff;
		color: rgb(66, 97, 140);
	}

	.card-btn--share {
		background-color: rgb(66, 97, 140);
		color: #ffffff;
	}

	.contact__scroll {
		width: 750rpx;
		white-space: nowrap;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
		overflow-x: auto;
	}

	.contact-item__wrapper {
		display: inline-block;
		margin-left: 20rpx
	}

	.contact-item {
		height: 100rpx;
		box-shadow: 0 16rpx 48rpx 0 rgb(7 1 38 / 7%);
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		border-radius: 8rpx;
		border: 1rpx #eee solid;
	}

	.contact-item .iconfont {
		font-size: 60rpx;
		color: rgb(66, 97, 140);
	}

	.contact-item__right {
		height: 70rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.contact-item__name {
		color: #011128;
		font-size: 24rpx;
		font-weight: 500;
	}

	.contact-item__value {
		color: #67707e;
		font-size: 22rpx;
	}

	.praise__wrapper {
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690rpx;
		padding: 0 30rpx;
		height: 80rpx;
	}

	.priase-left__wrapper {
		width: 400rpx;
		display: flex;
		align-items: center;
	}

	.praise__text {
		color: #67707e;
		font-size: 26rpx;
	}

	.praise__icon {
		color: rgb(205, 206, 205)
	}

	.praise__icon--active {
		color: rgb(66, 97, 140) !important;
	}

	.praise__img {
		width: 48rpx;
		height: 48rpx;
		border-radius: 8rpx;
		margin-right: 10rpx;
	}

	.priase-right__wrapper {
		height: 80rpx;
		width: 100rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.icon-dianzan_kuai {
		color: #67707e;
		font-size: 34rpx !important;
		margin-left: 10rpx;
	}

	.introduce-title {
		width: 690rpx;
		height: 54rpx;
		line-height: 54rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		font-size: 36rpx;
		font-weight: 600;
		color: #011128;
		margin-top: 50rpx;
	}

	.introduce-title__icon {
		width: 42rpx;
		height: 42rpx;
		background-color: rgb(66, 97, 140);
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
	}

	.introduce-title__icon .iconfont {
		font-size: 24rpx;
		color: #ffffff;
	}

	.introduce-content__wrapper {
		width: 630rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		background: #fff;
		box-shadow: 0 8rpx 24rpx 0 rgb(7 1 38 / 7%);
		border-radius: 8rpx;
	}

	.introduce-content__title {
		height: 54rpx;
		line-height: 54rpx;
		display: flex;
		align-items: center;
		font-weight: 600;
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #011128;
	}

	.introduce-content__text {
		width: 640rpx;
		font-size: 26rpx;
		line-height: 42rpx;
		font-weight: 400;
		color: #67707e;
		word-wrap: break-word;
		margin-top: 10rpx;
	}
	
	.introduce-timeline{
		margin-top: 30rpx;
	}
	
	.introduce-timeline-item {
	    position: relative;
	    padding-bottom: 20rpx;
	}
	
	.introduce-timeline-item__tail {
	    position: absolute;
	    left: 8rpx;
	    height: 100%;
	    border-left: 2rpx solid #e4e7ed;
	}
	
	.introduce-timeline-item__node {
	    position: absolute;
	    background-color: #e4e7ed;
	    border-radius: 50%;
	    display: flex;
	    justify-content: center;
	    align-items: center;
		left: -2rpx;
		width: 24rpx;
		height: 24rpx;
	}
	
	.introduce-timeline-item__wrapper {
	    position: relative;
	    padding-left: 56rpx;
	    top: -12rpx;
	}
	
	.introduce-timeline-item__timestamp {
	    color: #909399;
	    font-size: 26rpx;
		margin-bottom: 16rpx;
		padding-top: 8rpx;
	}
	
	.introduce-timeline-item__content {
	    color: #303133;
	}
	
	.introduce-card{
		border-radius: 8rpx;
	    box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, .1);
		padding: 20rpx;
	}
	
	.introduce-card__title {
	    color: #000000;
		font-size: 30rpx;
	}
	
	.introduce-card__text {
	    font-size: 26rpx;
		line-height: 40rpx;
	    color: #67707e;
		margin-top: 10rpx;
	}
	
	.contact-float {
		position: fixed;
		right: 20rpx;
		bottom: 300rpx;
		width: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 16 48rpx 0 rgba(7, 1, 38, .07);
		background: transparent;
	}

	.contact-float::after {
		border: none;
	}

	.contact-float__avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
	}

	.contact-float__text {
		width: 120rpx;
		height: 40rpx;
		background: rgb(66, 97, 140);
		font-size: 24rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -20rpx;
		border-radius: 8rpx;
	}

	.share-canvas {
		width: 375px;
		height: 280px;
		background-color: #fff;
		position: absolute;
		left: -9999px;
	}

	.poster-canvas {
		width: 750px;
		height: 700px;
		background-color: #fff;
		position: absolute;
		left: -9999px;
	}
</style>